<template>
	<om-page>
		<om-topbutton :hasBgColor="true" @click='searchTab'></om-topbutton>
		<uni-collapse :accordion="true" style="margin-top: 53px;">
			<uni-collapse-other-item :noClick="true" :title="userInfo.userName" :unit="''" color="#333333" :showLength="false" :showArrow="false">
			</uni-collapse-other-item>
			<uni-collapse-other-item :noClick="true" :open="true"  title="可调休工时" :unit="''" color="#333333" :showLength="true" :showArrow="false"
				:text="userInfo.hourStr?(userInfo.hourStr+'小时'+(userInfo.dayStr?'('+userInfo.dayStr+'天)':'')):(0+'小时')">
				<uni-collapse :accordion="true">
					<uni-collapse-other-item v-for="(item,index) in dataList" :key="index" class="margin-left" :title="item.effectDate + '\xa0\xa0\xa0 +'+(item.canUseHourStr?item.canUseHourStr+'小时':'0小时') + (item.validDay?(',有效期'+item.validDay+'天'):'')" :unit="''" color="#333333" :showLength="false" :noClick="item.deduceList?false:true"  :showArrow="item.deduceList?true:false">
						<view class="margin-left"> 
							<view class="padding collapse-item-info info-border-bottom" v-if="item.deduceOverDate">
								<view class="om-font-size" >
									{{'过期时间:'+ item.deduceOverDate?item.deduceOverDate:''}}
								</view>
							</view>
							<view class="padding collapse-item-info info-border-bottom">
								<view class="om-font-size ">
									{{ item.effectDate + '\xa0\xa0\xa0+'+  item.hourStr+'小时'}}
								</view>
								<view class="om-font-size collapse-item-info-button om-color" v-if="item.overtimeCode">
									<view  class="padding-left" @click="itemClick('add',item)">
										去查看
									</view>
								</view>
							</view>  
							<view class="padding collapse-item-info info-border-bottom" v-for="(subItem,subIndex) of item.deduceList" :key="subIndex">
								<view class="om-font-size">
									{{(subItem.applyUseDate?subItem.applyUseDate:'')  + '\xa0\xa0\xa0-'+subItem.deduceHourStr+'小时' }}
								</view>
								<view class="om-font-size collapse-item-info-button om-color">
									<view  class="padding-left" @click="itemClick('minus',subItem)">
										去查看
									</view>
								</view>
							</view>
							<view class="padding collapse-item-info" v-if="item.cancelHourStr">
								<view class="om-font-size">
									{{item.effectDate + ' 作废'+item.cancelHourStr+'小时'}}
								</view>
							</view>
						</view>
					</uni-collapse-other-item>
				</uni-collapse>
				<!-- <view class="margin-left">
					<view class="padding collapse-item-info" v-for="(item,index) of dataList" :key="index" :class="(index != Number(dataList.length)-1)?'info-border-bottom':''">
						<view class="om-font-size">
							{{}}
						</view>
						<view class="om-font-size collapse-item-info-button om-color">
							<view  class="padding-left" @click="itemClick('add',subItem)">
								去查看
							</view>
						</view>
					</view>
				</view> -->
			</uni-collapse-other-item>
		</uni-collapse>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import {getUrl } from '../../../static/js/common.js';
	import {
		mapState
	} from 'pinia';
	import {
		useLoginUserStore
	} from '@/stores/login-user.js';
	export default {
		data() {
			return {
				scrollTop: 0,
				page: 1,
				rows: 20,
				totalList:[],
				dataList: [
					{
						canUseHourStr: "",
						cancelHourStr: "",
						deduceHourStr: "",
						deduceList: '',
						deduceOver: false,
						deduceOverDate: '',
						deduceOverStr: '',
						deduceSecond: 0,
						deducingSecond: 0,
						effectDate: "",
						formCode: "",
						hourStr: "",
						id: '',
						overtimeCode: '',
						record: '',
						second:'',
						source: "",
						userId: '',
						userName: ""
					}
				],
				cachename:"timeBreak",
				userInfo: {
					loadding: false,
					pullUpOn: false,
					userName: "",
					userId: "",
					hourStr: "",
					second: 0
				}
			}
		},
		computed: {
			...mapState(useLoginUserStore, ["userId"])
		},
		methods: {
			searchTab() {
				let param = {
						url:'timeBreakShow/findSearchUserPage',
						msg:"考勤主管可以查所有人；其他上级可查下级！",
						cachename:this.cachename
				}
				let url = getUrl('../search/search',param)
				uni.navigateTo({
					url: url
				});
			},
			itemClick(type,item){
				let _that = this
				switch(type){
					case 'add':
						_that.om.getFormInfoByFileCode(item.overtimeCode,item.formCode)
					break;
					case 'minus':
						_that.om.getFormInfoByFileCode(item.askleaveCode,item.formCode)
					break;
				}
			},
			getTimeBreakTotal(userId) {
				let _that = this
				_that.om.request(
					"wxTimeBreak/getTimeBreakTotal", {
						userId: (userId?userId:_that.userId)
					}
				).then(res => {
					_that.userInfo = res.value
				})
			},
			getTimeBreakSubPage(page, rows,userId) {
				let _that = this
				_that.om.request(
					"wxTimeBreak/getTimeBreakSubPage", {
						page: page,
						rows: rows,
						userId:  (userId?userId:_that.userId)
					}
				).then(res => {
					uni.showLoading({
						title:"加载中..."
					})
					setTimeout(()=>{
						if(res.rows){
							if(_that.page != 1){
								for(let item of res.rows){
									_that.totalList.push(item)
								}
							}else{
								_that.totalList = res.rows
							}
							_that.dataList = _that.totalList
							uni.hideLoading()
						}
					},1000)
				})
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShow() {
			let _that = this
			_that.page = 1
			uni.getStorage({
				key:_that.cachename,
				success:(res)=>{
					if(res.data){
						let d = res.data
						_that.getTimeBreakTotal(d.id)
						_that.getTimeBreakSubPage(_that.page, _that.rows,d.id)
					}
				},
				fail:(res)=>{
					_that.getTimeBreakTotal()
					_that.getTimeBreakSubPage(_that.page, _that.rows)
				}
			})
		},
		onUnload(){
				uni.removeStorage({
					key:this.cachename,
					success:(res)=>{}
				})
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:"我的调休"
			})
		},
		onReachBottom() {
			if(this.totalList.length == (this.rows * this.page)){
				this.page += 1
				this.getTimeBreakSubPage(this.page,this.rows)
			}
 		}
	}
</script>

<style scoped>
	.collapse-item-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.collapse-item-info-button{
		white-space: nowrap;
		border-left: 1px solid #EEEEEE ;
	}
	.info-border-bottom{
		border-bottom: 1px solid #EEEEEE;
	}
</style>
